<template>
	<yb-list
	ref="list"
	:custom-class="customClassSync"
	:custom-id="customIdSync"
	:custom-style="customStyleSync"
	:scrollable="scrollable"
	:enableScrolling="enableScrolling"
	@scroll="onScroll"
	:loading="loading"
	:empty="empty"
	:pulldown="pulldown"
	:loadmore="loadmore"
	:column-count="columnCount"
	:column-width="columnWidth"
	:column-gap="columnGap"
	:left-gap="leftGap"
	:right-gap="rightGap"
	:always-scrollable-vertical="alwaysScrollableVertical"
	@pulldown="onPulldown"
	@loadmore="onLoadmore"
	:type="type">
		<!-- #ifdef APP-NVUE -->
		<header>
			<view :style="{height: Util.pixelunit(columnGap)}"></view>
		</header>
		<slot></slot>
		<!-- #endif -->
		<!-- #ifndef APP-NVUE -->
		<view class="yb-waterfall-wrapper yb-flex" :style="{
			'padding-left': Util.pixelunit(leftGap),
			'padding-right': Util.pixelunit(leftGap),
			'padding-top': Util.pixelunit(columnGap),
		}">
			<view class="yb-waterfall-row yb-flex yb-row yb-wrap" :style="{
				'height': maxHeight + 'px'
			}">
				<slot></slot>
			</view>
		</view>
		<!-- #endif -->
	</yb-list>
</template>

<script>
	import Util from '../../js_sdk/util.js'
	import ComponentMixin from '../../js_sdk/componentMixin.js'
	export default {
		name: 'YbWaterfall',
		mixins: [ComponentMixin],
		props: {
			// #ifndef APP-NVUE
			type: {
				type: String,
				default: 'scroll'
			},
			// #endif
			//开启滚动
			scrollable: {
				type: Boolean,
				default: true
			},
			//显示滚动条
			showScrollbar: {
				type: Boolean,
				default: true
			},
			//监听滚动事件
			enableScrolling: {
				type: Boolean,
				default: false
			},
			loading: {
				type: [Object,Boolean],
				default () {
					return new Object
				}
			},
			empty: {
				type: [Object,Boolean],
				default () {
					return new Object
				}
			},
			//下拉加载配置
			pulldown: {
				type: [Object,Boolean],
				default () {
					return new Object
				}
			},
			//触底加载更多配置
			loadmore: {
				type: [Object,Boolean],
				default () {
					return new Object
				}
			},
			//滚动事件触发频率 仅nvue下有效
			offsetAccuracy: {
				type: Number,
				default: 100
			},
			//开启回弹效果 仅APP-NVUE下有效
			bounce: {
				type: Boolean,
				default: true
			},
			//是否是左右切换列表
			isSwiperList: {
				type: Boolean,
				default: false
			},
			fixFreezing: {
				type: Boolean,
				default: false
			},
			alwaysScrollableVertical: {
				type: Boolean,
				default: false
			},
			attr: {
				type: String,
				default: 'image'
			},
			//瀑布流列数
			columnCount: {
				type: Number,
				default: 2
			},
			columnWidth: {
				type: [String,Number],
				default: 'auto'
			},
			columnGap: {
				type: Number,
				default: 24
			},
			leftGap: {
				type: Number,
				default: 24
			},
			rightGap: {
				type: Number,
				default: 24
			}
		},
		computed: {
			Util () {
				return Util
			},
			maxHeight () {
				let height = 0
				for ( let i in this.listData ) {
					height = Math.max(this.listData[i].height, height)
				}
				return height
			}
		},
		data () {
			return {
				// #ifdef APP-NVUE
				type: 'waterfall',
				// #endif
				listData: []
			}
		},
		// #ifndef APP-NVUE
		mounted() {
			this.refresh()
		},
		// #endif
		methods: {
			// #ifndef APP-NVUE
			refresh () {
				this.listData = []
				for ( let i = 0; i < this.columnCount; i++ ) {
					this.listData.push({
						height: 0
					});
				}
			},
			changeListHeight (i, height) {
				this.listData[i].height += height
			},
			removeListHeight (i, height) {
				this.listData[i].height -= height
			},
			// #endif
			onScroll (e) {
				this.$emit('scroll', e)
			},
			onPulldown (callback) {
				this.$emit('pulldown', callback)
			},
			onLoadmore (callback) {
				this.$emit('loadmore', callback)
			},
			backTop () {
				this.$refs.list.backTop()
			},
			setSpecialEffects (args) {
				this.$refs.list.setSpecialEffects(args)
			},
			//重置加载更多状态
			resetLoadmore () {
				this.$refs.list.resetLoadmore()
			},
			//设置加载更多为完毕状态
			setLoadmoreEnd () {
				this.$refs.list.setLoadmoreEnd()
			},
			//设置加载更多为成功状态
			setLoadmoreSuccess () {
				this.$refs.list.setLoadmoreSuccess()
			},
			//设置加载更多为失败状态
			setLoadmoreFail () {
				this.$refs.list.setLoadmoreFail()
			}
		},
		// #ifndef APP-NVUE
		watch: {
			columnCount (newVal) {
				this.refresh()
			}
		}
		// #endif
	}
</script>

<style scoped>
	.yb-waterfall-wrapper {
		/* #ifndef APP-NVUE */
		overflow: visible;
		/* #endif */
	}
	.yb-waterfall-row {
		/* #ifndef APP-NVUE */
		overflow: visible;
		/* #endif */
		position: relative;
	}
</style>